<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>虚拟银行系统 - 购买理财产品</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  <link rel="stylesheet" href="/css/main.css">
  <style>
    /* Product purchase specific styles */
    .purchase-container {
      max-width: 800px;
      margin: 0 auto;
    }
    
    .purchase-header {
      text-align: center;
      margin-bottom: var(--spacing-lg);
    }
    
    .purchase-step {
      display: flex;
      justify-content: center;
      margin-bottom: var(--spacing-md);
    }
    
    .step-item {
      display: flex;
      align-items: center;
      margin-right: var(--spacing-md);
      color: var(--light-text);
    }
    
    .step-item.active {
      color: var(--primary-color);
    }
    
    .step-item.completed {
      color: var(--success-color);
    }
    
    .step-number {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: var(--spacing-xs);
      border: 1px solid currentColor;
      font-weight: 500;
    }
    
    .step-item.active .step-number {
      background-color: var(--primary-color);
      color: white;
      border-color: var(--primary-color);
    }
    
    .step-item.completed .step-number {
      background-color: var(--success-color);
      color: white;
      border-color: var(--success-color);
    }
    
    .step-arrow {
      margin: 0 var(--spacing-sm);
      color: var(--light-text);
    }
    
    .product-summary {
      background-color: rgba(26, 58, 143, 0.05);
      border-radius: var(--border-radius-lg);
      padding: var(--spacing-lg);
      margin-bottom: var(--spacing-lg);
    }
    
    .summary-header {
      display: flex;
      align-items: center;
      margin-bottom: var(--spacing-md);
    }
    
    .product-icon {
      width: 48px;
      height: 48px;
      border-radius: 8px;
      background-color: var(--primary-color);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      margin-right: var(--spacing-md);
      flex-shrink: 0;
    }
    
    .product-title {
      flex: 1;
    }
    
    .product-name {
      font-size: 18px;
      font-weight: 500;
      margin-bottom: 2px;
    }
    
    .product-code {
      font-size: 13px;
      color: var(--light-text);
    }
    
    .summary-details {
      display: flex;
      flex-wrap: wrap;
    }
    
    .summary-detail {
      width: 33.33%;
      margin-bottom: var(--spacing-md);
    }
    
    .detail-label {
      font-size: 13px;
      color: var(--light-text);
      margin-bottom: 4px;
    }
    
    .detail-value {
      font-weight: 500;
    }
    
    .detail-value.accent {
      color: var(--accent-color);
    }
    
    .purchase-form {
      margin-bottom: var(--spacing-lg);
    }
    
    .amount-card {
      margin-bottom: var(--spacing-lg);
    }
    
    .amount-display {
      padding: var(--spacing-md) 0;
      text-align: center;
      border-bottom: 1px solid var(--divider-color);
      margin-bottom: var(--spacing-md);
    }
    
    .amount-label {
      font-size: 14px;
      color: var(--light-text);
      margin-bottom: var(--spacing-xs);
    }
    
    .amount-value {
      font-size: 36px;
      font-weight: 500;
    }
    
    .profit-estimate {
      text-align: center;
      padding: var(--spacing-md);
      margin-bottom: var(--spacing-md);
      background-color: var(--light-bg);
      border-radius: var(--border-radius-md);
    }
    
    .profit-label {
      font-size: 14px;
      color: var(--light-text);
      margin-bottom: var(--spacing-xs);
    }
    
    .profit-value {
      font-size: 24px;
      font-weight: 500;
      color: var(--accent-color);
      margin-bottom: var(--spacing-xs);
    }
    
    .profit-hint {
      font-size: 13px;
      color: var(--light-text);
    }
    
    .agreement-section {
      margin-bottom: var(--spacing-lg);
    }
    
    .agreement-check {
      display: flex;
      align-items: flex-start;
      margin-bottom: var(--spacing-sm);
    }
    
    .agreement-check input {
      margin-top: 4px;
      margin-right: var(--spacing-sm);
    }
    
    .agreement-links a {
      color: var(--primary-color);
      text-decoration: none;
    }
    
    .agreement-links a:hover {
      text-decoration: underline;
    }
    
    .purchase-result {
      text-align: center;
      padding: var(--spacing-xl) 0;
    }
    
    .result-icon {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto var(--spacing-md);
      font-size: 40px;
    }
    
    .result-icon.success {
      background-color: rgba(82, 196, 26, 0.1);
      color: var(--success-color);
    }
    
    .result-icon.error {
      background-color: rgba(245, 34, 45, 0.1);
      color: var(--error-color);
    }
    
    .result-title {
      font-size: 24px;
      font-weight: 500;
      margin-bottom: var(--spacing-sm);
    }
    
    .result-message {
      color: var(--light-text);
      margin-bottom: var(--spacing-lg);
    }
    
    .result-details {
      display: inline-block;
      text-align: left;
      margin-bottom: var(--spacing-lg);
    }
    
    .result-detail {
      margin-bottom: var(--spacing-sm);
    }
    
    .result-label {
      color: var(--light-text);
      margin-right: var(--spacing-sm);
    }
    
    .result-value {
      font-weight: 500;
    }
    
    .result-actions {
      margin-top: var(--spacing-lg);
    }
    
    @media (max-width: 768px) {
      .purchase-container {
        padding: 0 var(--spacing-md);
      }
      
      .summary-detail {
        width: 50%;
      }
    }
  </style>
</head>
<body>
  <div class="app-wrapper">
    <!-- Top Navigation Bar -->
    <div id="top-navbar"></div>
    
    <div class="main-container">
      <!-- Sidebar -->
      <div id="sidebar"></div>
      
      <!-- Main Content -->
      <div class="content">
        <div class="page-header">
          <div class="page-title">购买理财产品</div>
          <div class="breadcrumb">
            <a href="/index.html">首页</a>
            <i class="fas fa-angle-right"></i>
            <a href="/financial.html">理财产品</a>
            <i class="fas fa-angle-right"></i>
            <span>购买理财产品</span>
          </div>
        </div>
        
        <div class="purchase-container" id="purchase-content">
          <div class="purchase-header">
            <div class="purchase-step">
              <div class="step-item completed">
                <div class="step-number">1</div>
                <div class="step-text">选择产品</div>
              </div>
              <div class="step-arrow">
                <i class="fas fa-chevron-right"></i>
              </div>
              <div class="step-item active">
                <div class="step-number">2</div>
                <div class="step-text">确认信息</div>
              </div>
              <div class="step-arrow">
                <i class="fas fa-chevron-right"></i>
              </div>
              <div class="step-item">
                <div class="step-number">3</div>
                <div class="step-text">完成购买</div>
              </div>
            </div>
          </div>
          
          <!-- Loading state -->
          <div class="loader-container">
            <div class="loader"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Scripts -->
  <script src="/js/utils/Utils.js"></script>
  <script src="/js/components/Toast.js"></script>
  <script src="/js/services/ApiService.js"></script>
  <script src="/js/components/TopNavBar.js"></script>
  <script src="/js/components/SideBar.js"></script>
  <script src="/js/pages/product-purchase.js"></script>
</body>
</html>
